{% extends 'base.html' %}
{% block title %}
    测试测试测试
{% endblock %}

{% block content %}

    <div v-for="(article,index) in articles" id="ArticleList" class="item">
            <!--用户头像和点赞-->
            <div class="ui small image" style="width:37px;height:37px;">
                {#                    <img style="width:37px;height:37px;" :src="article.author.image" v-on:click="userArticle(article)">#}


                <img style="width:37px;height:37px;"
                     :src="article.author.image" v-on:click="userArticle(article)">


                <!--点赞数未展开-->
                <div class="user_like" v-if="!article.show_all_content">
                    <button v-on:click="showAllContent(article)" class="ui icon button"
                            style="position:relative;background-color:#eff6fa;height:24px;width:37px;left:-13px;color: #698ebf;font-size:12px;font-weight: bold;">
                        <span id="close_like_count">[[ article.like_counts ]]</span>
                    </button>
                </div>
                <!--点赞数展开-->
                <div class="user-vote" v-if="article.show_all_content">
                    <div class="user-like" v-on:click="userVote(2, article)">
                        <div class="ui icon button up" :class="{'like':article.like_or == 2}">
                            <i class="ui caret up icon"></i>
                            <div id="user_like_counts">[[ article.like_counts ]]</div>
                        </div>
                    </div>

                    <div class="user-dislike" v-on:click="userVote(3, article)">
                        <div class="ui icon button down" :class="{'dislike':article.like_or == 3}">
                            <i class="ui caret down icon"></i>
                        </div>
                    </div>
                </div>
            </div>
            <!--答案主体-->
            <div class="content" style="display:inline-block;">
                <a id="question-title" class="header" style="font-size:15px;color:#225599;"
                   href="/article/[[article.id]]/">
                    [[ article.title ]]
                </a>
                <div class="meta">
                    <a id="username" href="/user/[[article.author.id]]/">[[article.author.nickname ]],</a>
                    <span id="user-desc">[[ article.author.description ]]</span>
                </div>
                <div v-if="!article.show_all_content" class="description">
                    <p style="font-size:13px;line-height:1.69;font-stretch: normal;">
                        [[ article.description]]
                        <a id="show-all-content-a" v-on:click="showAllContent(article)">显示全部</a></p>
                </div>

                <div class="description" style="margin-top: 15px">
                    <div class="description" style="margin-top: 15px">
{#                        id="insertUeditor"#}
                        <p  style="font-size:13px;line-height:1.69;font-stretch: normal;">
                                                        <script id="editor"  type="text/plain"></script>
                        </p>

                        {#                        <a id="show-all-content-a" #}
                        {#                           v-on:click="article.show_all_content=!article.show_all_content">收起</a>#}
                        <a id="show-all-content-a" v-if="article.show_all_content"
                           v-on:click="closeUeditor(article)">收起</a>
                    </div>

                    <div class="extra">
                        <i class="comment icon"></i>
                        <a id="comment-num-a" v-if="article.comment_counts==0" v-show="!article.show_all_comments"
                           v-on:click="getComment(article, 1)">添加评论</a>
                        <a id="comment-num-a" v-show="article.show_all_comments"
                           v-on:click="showAllCommentsSwitch(article)">收起</a>
                        <a id="comment-num-a" v-on:click="getComment(article, 1)"
                           v-show="!article.show_all_comments"
                           v-if="!article.comment_counts==0">[[ article.comment_counts ]]条评论</a>
                    </div>
                    <!--评论和回复-->
                    <div class="animated fadeIn" v-if="article.show_all_comments"
                         style="box-sizing: border-box;padding: 20px;width: 500px;border: 1px solid #ddd;border-radius: 5px">
                        <div class="ui comments">
                            <div v-for="comment in article.article_comments" class="comment">
                                <a class="avatar">
                                    <img :src="comment.comment_user.image">
                                </a>
                                <div class="content">
                                    <a id="username" href="/user/[[comment.comment_user.id]]/articles/">
                                        [[comment.comment_user.nickname]]
                                    </a>

                                    <div class="metadata">
                                        <div class="date">[[comment.create_time]]</div>
                                    </div>
                                    <div class="text">
                                        [[comment.content]]
                                    </div>
                                    <div v-on:click="ifLogin" class="actions">
                                        <a v-on:click="commentReplyInput(comment)" class="reply active"
                                           :class="comment.comment_reply_input" style="color: #999">回复</a>
                                    </div>

                                    <div v-show="comment.comment_reply_input" class="ui reply form">
                                        <div class="field">
                                            <input v-model="comment.comment_content">
                                        </div>
                                        <div v-on:click="commentReplyInput(comment)" class="ui tiny button"
                                             style="background-color: white;color: #999;margin-left: 68%;">
                                            取消
                                        </div>
                                        <div v-on:click="replyComment(article, comment)" class="ui tiny button"
                                             style="background-color: #0D6EB8;color: white;float: right">
                                            回复
                                        </div>
                                    </div>

                                </div>
                                <!-- 子评论 -->
                                <div class="child_comments">

                                    <div class="content" v-for="child_comment in comment.child_comments">

                                        <a href="/user/[[child_comment.comment_user.id]]/articles/">
                                            [[child_comment.comment_user.nickname]]
                                        </a>
                                        <span>:</span>
                                        <a href="/user/[[child_comment.reply_to.comment_user.id]]/articles/">@[[child_comment.reply_to.comment_user.name]]</a>
                                        <div class="text" style="display: inline-block;">
                                            [[child_comment.content]]
                                        </div>

                                        <div class="actions">
                                            <span class="date metadata" style="margin-left: 0">[[child_comment.create_time]]</span>
                                            <a v-on:click="commentReplyInput(child_comment)" class="reply active"
                                               :class="child_comment.comment_reply_input" style="color: #999">回复</a>
                                        </div>

                                        <div v-show="child_comment.comment_reply_input" class="ui reply form">
                                            <div class="field">
                                                <input v-model="child_comment.comment_content">
                                            </div>
                                            <div v-on:click="commentReplyInput(child_comment)"
                                                 class="ui tiny button"
                                                 style="background-color: white;color: #999;margin-left: 68%;">
                                                取消
                                            </div>
                                            <div v-on:click="replyChildComment(article, comment, child_comment)"
                                                 class="ui tiny button"
                                                 style="background-color: #0D6EB8;color: white;float: right">
                                                回复
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>

                            <div v-show="page>0" class="comment-pagination"
                                 style="border-top: 1px solid #eee;border-bottom: 1px solid #eee;font-size: 1.1em;text-align: center;line-height: 2.7;height: 43px;margin-top: 20px">
                                <a v-show="havePre" style="padding: .5em;"
                                   v-on:click="getPreCom(article, page)">上一页</a>
                                <span v-show="!havePre" style="color: #999">上一页</span>
                                <span v-for="page in page_lists">
                                        <span><a v-show="now_page!=page" style="padding: .5em;"
                                                 v-on:click="getComment(article, page)">[[page]]</a></span>
                                        <span style="padding: .5em;" v-show="now_page==page">[[page]]</span>
                                    </span>

                                <a v-show="haveNext" style="padding: .5em;"
                                   v-on:click="getNextCom(article, page)">下一页</a>
                                <span v-show="!haveNext" style="color: #999">下一页</span>
                            </div>

                        </div>

                        <!--评论表单-->
                        <form class="ui form">
                            <div v-on:click="ifLogin" class="field">
                                <input v-model="comment_content" placeholder="写下你的评论...">
                            </div>
                            <div v-on:click="comment_content=''" class="ui tiny button"
                                 style="background-color: white;color: #999;margin-left: 71%;">
                                取消
                            </div>
                            <div v-on:click="addComment(article)" class="ui tiny button"
                                 style="background-color: #0D6EB8;color: white;float: right">
                                评论
                            </div>
                        </form>
                    </div>

                </div>
            </div>

            <div class="ui divider"></div>
        </div>
{% endblock %}


{% block vue_js %}
    <script
            type="text/javascript">
        //实例化编辑器
        var ue = UE.getEditor('editor', {
            serverUrl: 'controller/',

            autoHeightEnabled: true,

            autoFloatEnabled: true,

            initialFrameWidth: 690,

            initialFrameHeight: 483,
        });
    </script>
{% endblock %}